<template>
  <div class="box3">
    <div style="text-align:center; font-size:20px;margin: 20px;">{{user.shopName}} 的上架产品</div>
    <div v-for="item in foods" class="list">
      <el-popconfirm
    confirm-button-text="删除"
    cancel-button-text="取消"
    :icon="InfoFilled"
    icon-color="#626AEF"
    title="确定要删除这道菜吗?"
    @confirm="deleteFood(item.name)"
    @cancel=""
  >
  <template #reference>
    <el-button plain @click="" style="margin-bottom: 1%;">
      菜品名：{{ item.name }}
      价格：{{ item.price }} 
      <el-icon style="left: 5px;"><Close /></el-icon>
    </el-button>
  </template>
  </el-popconfirm>
    </div>
  </div>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="添加菜品" name="first">
        <div class="addbox">
          <el-form label-width="80px" :model="formLabelAlign" style="width: 300px; margin: auto;" :rules="rules">
            <el-form-item label="菜品名" prop="name">
              <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="单价" prop="price">
              <el-input v-model="formLabelAlign.price" />
            </el-form-item>
            <el-form-item label="封面" prop="url">
              <el-upload action="http://123.60.90.6/api/index.php" :data="data1" list-type="picture-card" method="post"
                accept=".jpg,.png" name="image" :auto-upload="true" :on-success="upsuccess" :on-error="upfailed">
                <el-icon>
                  <Plus />
                </el-icon>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="文本描述" prop="text">
              <el-input v-model="formLabelAlign.text" :rows="3" type="textarea" placeholder="菜品的描述" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addFoods">添加</el-button>
            </el-form-item>
          </el-form>
          <div class="showfood">
            预期表现：
            <PhotoMenu :name=formLabelAlign.name :url="formLabelAlign.url" :text="formLabelAlign.text" @click="">
            </PhotoMenu>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单管理" name="second">
        <Order></Order>
      </el-tab-pane>
      <el-tab-pane label="其他" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, type Ref } from 'vue'
import { ElMessage, type FormRules, type TabsPaneContext } from 'element-plus'
import { storeA } from '@/piniaStore/storeA'
import PhotoMenu from '../components/PhotoMenu.vue'
import {addFood, delfood} from '../api/Business'
import Order from '../components/Business/Order-manage.vue'
import { InfoFilled } from '@element-plus/icons-vue'
import flash from '../api/flash'
import { getshoplist, getuser } from '@/api/getinfo'
//刷新用户数据
flash()
const piniaStore = storeA()
const activeName: any = ref('first')
let foods: Ref<food[]> = ref([]);
const user:user = piniaStore.user
// piniaStore.foods.forEach((item)=>{
//   if(item.business===user.shopName){
//     foods.value.push(item)
//   }
// })
// await getuser(piniaStore.token as string,true)
async function fn(){
  foods.value = await getshoplist(user.shopName as string,piniaStore.user.token as string)as any
  console.log(foods.value)
}
fn()
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const data1 = {
  token: "28ee256592269216cf9c192661aa63ea"
}
let formLabelAlign: food = reactive({
  name: '',
  url: '../img/wait.png',
  price: 0,
  text: "",
  business: piniaStore.user.shopName as string
})
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入有效的菜名！', trigger: 'blur' },
    { min: 1, max: 9, message: '菜名在1-9个字之间', trigger: 'blur' },
  ],
  price: [
    {
      required: true, message: '请输入菜价', trigger: 'blur'
    },
    { type: 'number', message: '这并不是一个数字', transform: (value) => Number(value) },
  ],
  url: [
    { required: true },
  ],
  text: [
    { required: true, message: '请输入描述', trigger: 'blur' }
  ]
})
//点击添加按钮
function addFoods() {
  if (formLabelAlign.name != "" && formLabelAlign.price != 0 && formLabelAlign.text != "") {
    console.log("上传成功")
    piniaStore.foods.push(formLabelAlign)
    addFood(formLabelAlign,piniaStore.user.token as string)
    formLabelAlign = {
      name: '',
      url: '',
      price: 0,
      text: "",
      business: piniaStore.user.shopName as string
    }
    fn()
  }
  else {
    console.log("请填写必填信息")
    ElMessage({
      message: '请填写必填信息',
      type: 'warning',
    })
  }
}
//删除食物
async function deleteFood(name:string){
  console.log("删除"+name)
  await delfood(name,piniaStore.user.shopName as string,piniaStore.user.token as string)
  fn()
}

function upsuccess(res: any) {
  console.log("上传成功")
  console.log(res)
  formLabelAlign.url = res.url

}
function upfailed(res: any) {
  console.log("上传失败")
  console.log(res)

}
</script>
<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.box3 {
  height: 400px;
  width: 100%;
}

.addbox {
  display: flex;
}

.list {
  display: flex;
}

.showfood {
  height: 350px;
  width: 40%;
}
</style>